<template>
  <div class="chart-box">
    <div class="head">
      <div class="line-box">
        <div class="line"></div>
        <div class="line-content">意向客户渠道来源分析</div>
        <div class="line"></div>
      </div>
    </div>
    <div class="box-main">
      <a-spin :spinning="spinning">
        <div v-show="dataList.length" class="chart-content" id="CustomerAnalysis-Business" ></div>
        <Empty
          style="margin-top: 200px"
          :image="simpleImage"
          v-show="!dataList.length"
        />
      </a-spin>
    </div>
  </div>
</template>
<script>
import {
  defineComponent,
  computed,
  watch,
  onMounted,
  reactive,
  toRefs,
  onUnmounted,
  ref,
  nextTick,
} from "vue";
import { Chart } from "@antv/g2";
import request from "@/common/utils/request";
import { message } from "ant-design-vue";
import _ from "lodash";
import { Empty } from "ant-design-vue";

export default defineComponent({
  name: "ChannelChart",
  components: {
    Empty,
  },
  setup(props, context) {
    const simpleImage = ref(Empty.PRESENTED_IMAGE_SIMPLE);
    const state = reactive({
      spinning: false,
      chart: {},
      dataList: [],
    })

    const renderChart = () => {
      state.spinning = true;
      request
        .get("/org", "/business/customer/ways/channelSource")
        .then((res) => {
          state.dataList = res?.list || [];
          state.spinning = false;
          nextTick(() => {
            state.chart = new Chart({
              container: 'CustomerAnalysis-Business',
              autoFit: true,
              appendPadding: [40, 24, 24, 24],
            });
            state.chart.scale('total', {
              nice: true,
              min: 0,
              alias: "总数",
            });
            state.chart.axis("channel_name", {
              tickLine: null,
            });
            state.chart.tooltip({
              showMarkers: false,
            });
            state.chart.axis('total', {
              grid:{
                line:{
                  type:"line",
                  style:{
                    stroke:"#8c8c8c",
                    lineDash:[1,3],//虚线
                  }
                },
              },
            });
            state.chart.interaction("active-region");

            state.chart.interval().position("channel_name*total");
            state.chart.option("scrollbar", {
              option: res.list,
              categorySize: 40,
            });
            state.chart.changeData(res.list);
            state.chart.render();
          })
        }).catch((err) => {
        state.spinning = false;
      });
    }


    onMounted(() => {
      renderChart();
    });

    onUnmounted(() => {
      if (!_.isEmpty(state.chart)) {
        state.chart.destroy();
      }
    })


    return {
      ...toRefs(state),
      simpleImage,
    };
  },
});
</script>

<style lang="less" scoped>
.chart-box {
  height: 600px;
  width: 100%;
  background: #fff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  border: 1px solid #f0f0f0;
}
.head {
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 16px;
}
.box-main {
  flex: 1;
}

.line-box {
  display: flex;
  align-items: center;
  .line {
    width: 20px;
    height: 2px;
    background: @primary-color;
  }
  .line-content {
    padding: 0 6px;
    color:@primary-color;
  }
}
.chart-content {
  width: 100%;
  height: 100%;
}
:deep(.ant-spin-nested-loading) {
  height: 100%;
}
:deep(.ant-spin-container) {
  height: 100%;
}
</style>